<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--左侧固定，右边自动占满-->
<style>
    .d1{
        width: 200px;
        background-color: pink;
        float: left;
    }
    .d2{
        height: 100px;
        background-color: lightskyblue;
        /*给一个元素中设置overflow:hidden，
        那么该元素的内容若超出了给定的宽度和高度属性，
        那么超出的部分将会被隐藏，不占位。*/
        overflow: hidden;
    }
</style>

<div class="d1">左侧固定</div>
<div class="d2">右边自动占满</div>
<br>

<!--左右固定，中间自适应的布局-->
<style>
    .left{
        width:200px;
        float:left;
        background-color:pink
    }
    .right{
        width:200px;
        float:right;
        background-color:pink
    }
    .center {margin:0 200px;   background-color:lightblue}
</style>

<div class="left">左边固定宽度</div>
<div class="right">左边固定宽度</div>
<div class="center">中间自适应</div>

<!--一个div始终贴在下方-->
<!--首先把蓝色div设置为相对定位
然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面-->
<style>
    .blue{
        position: relative;
        background-color:lightskyblue; 
        height: 300px;
    }
    .green{
        position: absolute;
        bottom: 0;
        height: 30px;
        width: 100%;
        background-color: lightgreen;
    }
</style>

<div class="blue">
    <div class="green">无论蓝色div高度如何变化，绿色div都会贴在下面</div>
</div>
</body>
</html>